<!--
 * @Description: 文件描述
 * @Date: 2022-04-12 10:32:08
 * @Author: yeming
-->
<template>
  <div class="toolbar-container"
       id="CusToolbar">
    <div id="mouse-position"></div>
    <!-- 查找飞机 -->
    <div class="toolbar-item">
      <el-tooltip :content="iconTitle.findUAV"
                  :placement="placement">
        <img class="item-img"
             src="/images/toolbar/feijiweizhi.png"
             @click="FindUavBtn()" />
      </el-tooltip>
    </div>
    <!-- 鼠标位置经纬度 -->
    <div class="toolbar-item-custom">
      <span class="custom-label">Lat:</span>
      <input class="item-input"
             type="text"
             @focus="InputgetFocus()"
             v-model="CommouseLat" />
      <span class="custom-label">Lon:</span>
      <input class="item-input"
             type="text"
             v-model="CommouseLng"
             @focus="InputgetFocus()" />
      <span class="custom-label">Alt:</span>
      <span class="custom-text">{{ mousealt }} m</span>
    </div>
    <!-- 跟随飞机 -->
    <div class="toolbar-item">
      <el-tooltip :content="iconTitle.followUAV"
                  :placement="placement">
        <img class="item-img"
             :src="UAVLoacked"
             @click="StartFPVBTN()" />
      </el-tooltip>

    </div>
  </div>
</template>

<script>
import { getUavActiveSessionId } from './common/uav.js'

export default {
  props: {
    mouselat: Number,
    mouselon: Number,
    mousealt: Number
  },
  data: function () {
    return {
      iconTitle: {
        takeoff: "设置起飞点",
        findUAV: "查找飞机",
        distanceMeasurement: "测距",
        jumpPosition: "跳转位置",
        toolbox: "工具箱",
        followUAV: "跟随飞机",
        podVision: "吊舱视角",
        lockVision: "锁定视角",
        elevationCheck: "高程检查",
        airlineFloat: "空中航线",
        viewRay: "视场射线",
        photoRec: "拍照投影",
        clearTrack: "清除轨迹",
        DEMWarning: "高程预警",
        DEMCheck: "请填写高程告警值",
        aboveSeaLevel: "海拔高度(m):",
        relativeHeight: "相对高度(m):",
        curTakeoffHeight: "当前起飞点海拔(m):",
        btnFresh: "填写后请点击刷新:"
      },
      placement: "top-start",
      iptFocus: false,
      dtmouselat: 0,
      dtmouselng: 0,
      demAlt: 300,
      demRehit: 150,
      tkalt: 150,
      g_airlineStatus: true,
      bShowRay: false,
      BLockAp: false,
      BClear: false,
      showdem: false,
      lockuav: false,
      lockPTZ: false,
      lockVW: false
    };
  },
  methods: {
    InputgetFocus: function () {
      this.iptFocus = true;
    },
    FindUavBtn: function () {
      // if (this.lockuav) return false;
      // this.$emit("btn-clicked", 1, true);
      let currentUavSessionId = getUavActiveSessionId();
      window.olcsMap2.lookingForCurrentUav(currentUavSessionId, 15);
    },
    StartFPVBTN: function () {
      // this.lockuav = !this.lockuav;
      // this.$emit("btn-clicked", 4, this.lockuav);
      // this.$emit("btn-clicked", 6, this.lockuav);
      // // ym发现（锁定视角可直接注释掉，暂未开放该功能）
      // // if (this.lockuav) {
      // //   this.lockPTZ = false;
      // //   this.$emit("btn-clicked", 5, this.lockPTZ);
      // // }
      this.lockuav = !this.lockuav;
      let currentUavSessionId = getUavActiveSessionId();
      window.olcsMap2.lockedCurrentUav(currentUavSessionId, this.lockuav);
    },
    CheckHeight: function () {
      this.showdem = !this.showdem;
      this.$emit("btn-clicked", 7, this.showdem, this.demAlt);
    },
    ShowRay: function () {
      this.$emit("btn-clicked", 13, this.bShowRay);
    }
  },
  computed: {
    UAVLoacked () {
      return this.lockuav == true
        ? "/images/toolbar/feijisuoding_no.png"
        : "/images/toolbar/fiejisuoding_off.png";
    },
    DEMALT: {
      get: function () {
        return this.demAlt;
      },
      set: function (val) {
        this.demRehit = Number(val) - Number(this.tkalt);
        this.demAlt = Number(val);
      }
    },
    DEMRE: {
      get: function () {
        return this.demRehit;
      },
      set: function (val) {
        this.demAlt = Number(val) + Number(this.tkalt);
        this.demRehit = Number(val);
      }
    },
    CommouseLng: {
      get: function () {
        if (this.iptFocus) return this.dtmouselng;
        else return this.mouselon;
      },
      set: function (val) {
        this.dtmouselng = val;
      }
    },
    CommouseLat: {
      get: function () {
        if (this.iptFocus) return this.dtmouselat;
        else return this.mouselat;
      },
      set: function (val) {
        this.dtmouselat = val;
      }
    }
  },
  watch: {
    tkalt: function (newval) {
      this.demAlt = Number(this.demRehit) + Number(newval);
      this.$emit("btn-clicked", 7, this.showdem, this.demAlt);
    }
  }
};
</script>
<style lang="scss">
.toolbar-container {
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  height: 35px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  .toolbar-item {
    border-radius: 5px;
    width: 35px;
    height: 35px;
    .item-img {
      width: 28px;
      height: 28px;
      margin-top: 3px;
      margin-left: 3px;
      cursor: pointer;
    }
  }
  .toolbar-item-custom {
    display: flex;
    justify-content: space-around;
    height: 35px;
    line-height: 35px;
    color: #fff;
    font-size: 14px;
    .custom-label {
      padding-left: 5px;
    }
    .item-input {
      width: 90px;
      line-height: 35px;
      text-align: center;
      background-color: transparent;
      color: #fff;
      border: none;
      outline: none;
    }
    .custom-text {
      width: 60px;
      line-height: 35px;
      text-align: center;
    }
  }
}

.popover-container {
  width: 160px;
  height: auto;
  .popover-title {
    width: 100%;
    line-height: 20px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }
  .popover-tips {
    font-size: 12px;
    padding: 2px 0;
  }
  .popover-content {
    .content-item {
      display: flex;
      .item-label {
        width: 80px;
        padding-right: 5px;
      }
      .item-input {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
  .col-img {
    width: 20px;
    height: 20px;
  }
}
</style>
<style>
#CusToolbar .el-button--text {
  padding: 0 !important;
}
</style>
